/* 成绩录入页面思路分析
1.页面一加载,发送ajax请求学员信息列表
2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本
3.输入框按enter键 : (1)获取输入框文本 (2)发送ajax请求  (3)移除输入框
*/
const token = localStorage.getItem('CMSTOKEN')
if (!token) {
    alert('亲，您还没登录哦！')
    location.href = '/login.html'
}

//1打开页面发送ajax请求 获取所有成绩
// 封装函数 getScoreList
// 在函数里面发送 ajax 请求
// 数据是否请求成功
// 将数据渲染到页面上面 服务器响应的对象
// const tbody = document.querySelector('tbody')
// function getScoreList() {
//     axios({
//         url: '/score/list',
//     }).then(({ data: res })  => {
//         console.log(res);
//         if (res.code !== 0) return Toast.fail(res.message)
//         Toast.success(res.message)
//         tbody.innerHTML = Object.keys(res.data).map(item => `
//            <tr>
//           <th scope="row">${item}</th>
//           <td>${res.data[item].name}</td>
//           <td class="score" data-id="${item}" data-batch="1">${res.data[item].score[0]} </td>
//           <td class="score" data-id="${item}" data-batch="1">${res.data[item].score[1]} </td>
//           <td class="score" data-id="${item}" data-batch="1">${res.data[item].score[2]}</td>
//           <td class="score" data-id="${item}" data-batch="1">${res.data[item].score[3]}</td>
//           <td class="score" data-id="${item}" data-batch="1">${res.data[item].score[4]}</td>
//         </tr>
           
//            `).join('')

//     })
// }
// getScoreList()
const tbody =document.querySelector('tbody')
function getScoreList(){
    axios({
        url:'/score/list',
    }).then(({data:res})=>{
        if (res.code !==0) return Toast.fail(res.message)
        Toast.success(res.message)
        tbody.innerHTML = Object.keys(res.data).map(item =>`
        <tr>
        <th scope="row">${item}</th>
       <td>${res.data[item].name}</td>
        <td class="score" data-id="${item}" data-batch="1">${res.data[item].score[0]} </td>
        <td class="score" data-id="${item}" data-batch="1">${res.data[item].score[1]} </td>
        <td class="score" data-id="${item}" data-batch="1">${res.data[item].score[2]} </td>
        <td class="score" data-id="${item}" data-batch="1">${res.data[item].score[3]} </td>
        <td class="score" data-id="${item}" data-batch="1">${res.data[item].score[4]} </td>
       </tr>
        
        `)
    })
}

// 2鼠标点击td 时 能够让td 产生错觉 可以编辑
// 2.1采用事件委托注册事件
// 2.2怎么判断 是后面的哪几个td呢
// 2.3创建input标签
// 2.4追加input标签
// 2.5让input自动获取焦点
// tbody.addEventListener('click', function (e) {
//     if (e.target.dataset.id) {
//         const inputNode = document.createElement('input')
//         inputNode.classList.add('inp')
//         inputNode.value = e.target.innerText
//         e.target.appendChild(inputNode)
//         inputNode.focus()
//         inputNode.select()
       tbody.addEventListener('click',function(e){
        if(e.target.dataset.id){
            const inputNode = document.createElement('input')
            inputNode.classList.add('inp')
            inputNode.value = e.target.innerText
            e.target.appendChild(inputNode)
            //获取焦点
            inputNode.focus()
            //全选
            inputNode.select()
        }
       })

        //2.6当input失去焦点时 将当前的input删除即可
        // inputNode.addEventListener('blur', function () {
        //     this.remove()
        // })
        inputNode.addEventListener('blur',function(){
            this.remove()
        })
        //2.7给input注册键盘按下或键盘抬起 判断按下是否是回车键
        // inputNode.addEventListener('keydown', function (e) {
        //     if (e.key === 'Enter') {
        //         const score = this.value
        //         const batch = this.parentNode.dataset.batch
        //         const stu_id = this.parentNode.dataset.id
        //         axios({
        //             url: '/score/entry',
        //             method: 'post',
        //             data: {
        //                 stu_id,
        //                 batch,
        //                 score
        //             }
        //         }).then(({ data: res }) => {
        //             if (res.code !== 0) return Toast.fail(res.message)
        //             Toast.success(res.message)
        //             getScoreList()
        //         }).catch(err=>{
        //             Toast.fail(err.response.data.message)
        //         })
        //     }
        // })
            
        inputNode.addEventListener('keydown',function(e){
              if (e.key === 'Enter'){
                const score = this.value
                const batch  =this.parentNode.dataset.batch
                const stu_id = this.parentNode.dataset.id
                axios({
                    url:'score/entry',
                    method:'post',
                    data:{
                        stu_id,
                        batch,
                        score
                    }
                }).then(({data:res})=>{
                    if(res.code !== 0)return Toast.fail(res.message)
                    Toast.success(res.message)
                    getScoreList()
                }).catch(err=>{
                    Toast.fail(err.response.data.message)
                })
              }
        })
